<template>
  <div class="main-div">
    <div class="login-div">
      <div class="login-description-div">
        <image style="height: 300px" src="/src/assets/img/logo.png" />
        <h4>基于SpringBoot开发的零售业务中台框架</h4>
        <p class="badge">
          <img
            src="https://img.shields.io/badge/Licence-Apache2.0-green.svg?style=flat"
          />
          <img
            src="https://img.shields.io/badge/Spring%20Boot-2.7-blue.svg"
            alt="Downloads"
          />
          <img src="https://img.shields.io/badge/MyBatisPlus-3.4.2-blue.svg" />
          <img
            src="https://img.shields.io/badge/Vue-3.4-blue.svg"
            alt="Downloads"
          />
        </p>
        <div class="project-introduce" style="padding: 20px">
          <p>⭐项目介绍</p>
          <p style="line-height: 30px">
            基于Spring
            Boot2.7、Mybatis-Plus、Sa-Token，前端基于Vue3、Element，移动端基于Uni-App、TypeScript的零售业务中台框架，简洁、灵活、结构清晰，支持多门店多渠道销售、管理遵循Apache2.0协议，完全开源，可免费用于个人或商业项目，您的Star是项目持续发展的动力，<a
              href="https://gitee.com/coding4java/springbok"
              >点此前往Star⭐</a
            >
          </p>
        </div>
      </div>
      <div class="login-form-div">
        <h1 style="text-align: center">Springbok</h1>
        <el-tabs model-value="user-login" stretch>
          <el-tab-pane label="用户登录" name="user-login">
            <el-form ref="formValidate" :rules="rules" :model="form">
              <el-form-item prop="username">
                <el-input
                  type="text"
                  v-model="form.username"
                  prefix-icon="User"
                ></el-input>
              </el-form-item>
              <el-form-item prop="userPassword">
                <el-input
                  type="password"
                  v-model="form.userPassword"
                  prefix-icon="Lock"
                  @keyup.enter="handleLogin"
                ></el-input>
              </el-form-item>
              <el-form-item prop="verifyCode" v-if="isCaptcha">
                <el-input
                  style="width: 50%"
                  type="text"
                  v-model="form.captcha"
                  prefix-icon="Clock"
                  @keyup.enter="handleLogin"
                  placeholder="验证码"
                ></el-input>
                <img
                  :src="captchaImage"
                  mode="scaleToFill"
                  style="width: 45%; margin-left: 5%; height: 40px"
                  @click="refreshCaptcha"
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" class="login-btn" @click="handleLogin"
                  >登录</el-button
                >
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <!-- <el-tab-pane label="手机登录" name="phone-login"> 手机登录 </el-tab-pane> -->
        </el-tabs>
      </div>
      <Slied ref="slied" @onSuccess="submitForm"></Slied>
    </div>
  </div>
</template>

<script setup name="Login">
import Slied from "@/components/common/Slied.vue";
import { login } from "@/api/common";
import { selectSysConfigByKey } from "@/api/config";
import router from "@/router";
import { ref, onMounted } from "vue";
import { useStore } from "@/store";
import { ElMessage, formEmits } from "element-plus";

let store = useStore();
let form = ref({});
let slied = ref();
let formValidate = ref();
let rules = ref({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  userPassword: [{ required: true, message: "请输入密码", trigger: "blur" }],
});
let isCaptcha = ref(false);
let captchaImage = ref(import.meta.env.VITE_BASE_API + `user/captcha?t=${Date.now()}`);
function handleLogin() {
  if (form.value.verifyMethod == "slider") {
    showSlied();
  } else {
    if (!form.value.captcha) {
      ElMessage.error("请输入验证码");
      return;
    }
    submitForm();
  }
}
function showSlied() {
  formValidate.value.validate((valid) => {
    if (valid) {
      slied.value.showSlied();
    }
  });
}
function submitForm() {
  login(form.value)
    .then((res) => {
      store.setUserInfo(res.data);
      ElMessage.success("登录成功");
      router.push("/home/index");
    })
    .catch((err) => {
      console.log(err);
    });
}
function refreshCaptcha() {
  captchaImage.value = import.meta.env.VITE_BASE_API + `user/captcha?t=${Date.now()}`;
}

onMounted(() => {
  selectSysConfigByKey("VERIFY_METHOD")
    .then((res) => {
      form.value.verifyMethod = res.data.configValue;
      if (form.value.verifyMethod == "captcha") {
        isCaptcha.value = true;
      } else {
        isCaptcha.value = false;
      }
    })
    .catch((err) => {
      console.log(err);
    });
});
</script>

<style scoped>
.main-div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: rgb(247, 247, 247);
  background-image: url(/src/assets/img/bg.png);
  background-repeat: no-repeat;
  background-size: cover;
}
.login-div {
  display: flex;
  width: 1200px;
}
.login-form-div {
  flex: 3;
  padding: 40px;
  background-color: rgb(255, 255, 255);
  border-radius: 5px;
}
.login-form-div .el-input {
  height: 40px;
}
.login-form-div .login-btn {
  width: 100%;
  height: 40px;
}
.login-description-div {
  flex: 7;
  background-color: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-right: 5px solid rgb(247, 247, 247);
}
.login-description-div .badge img {
  margin-left: 5px;
  margin-right: 5px;
}
</style>
